<template>
	<view>
		<view>
			<view class="itembox" v-for="(item,index) in list" v-key='item' @tap='showModal(index)'>
				<view class="brand" :class="item.brand=='AMD'?'green':'blue'">{{item.brand}}</view>
				<view class="name">{{item.name}}</view>
				<view v-if="index>2" class="jiaobiao"></view>
				<text v-if='index==0' class="first jiaobiao2 lg cuIcon-crownfill"></text>
				<text v-if='index==1' class="second jiaobiao2 lg cuIcon-crownfill"></text>
				<text v-if='index==2' class="third jiaobiao2 lg  cuIcon-crownfill"></text>
				<view class="jiaobiaoshuzi">{{index+1}}</view>
			</view>
		</view>
	
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">{{list[curindex].name}}</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
							<view v-if="type=='CPU'">
								<view class="box"><view>核心架构：{{list[curindex].jiagou}}</view></view>
								<view class="box"><view>主频：{{list[curindex].hepin}}</view></view>
								<view class="box"><view>睿频：{{list[curindex].boost}}</view></view>
								<view class="box"><view>核心数：{{list[curindex].heshu}}</view></view>
								<view class="box"><view>线程数：{{list[curindex].xiancheng}}</view></view>
								<view class="box"><view>功率：{{list[curindex].TDP}}</view></view>
							</view>
							<view v-else>
								<view class="box"><view>核心代号：{{list[curindex].hexin}}</view><view>{{details.zhupin}}</view></view>
								<view class="box"><view>流处理器数：{{list[curindex].chuliqi}}</view><view>{{details.chaopin}}</view></view>
								<view class="box"><view>加速频率：{{list[curindex].jiapin}}</view><view>{{details.heshu}}</view></view>
								<view class="box"><view>显存容量：{{list[curindex].xianrong}}</view><view>{{details.thread}}</view></view>
								<view class="box"><view>制程：{{list[curindex].zhicheng}}</view><view>{{details.size}}</view></view>
								<view class="box"><view>显存速率：{{list[curindex].xiancunsulv}}</view><view>{{details.type}}</view></view>
								<view class="box"><view>TDP：{{list[curindex].TDP}}</view><view>{{details.type}}</view></view>
								<view class="box"><view>发布时间：{{list[curindex].time}}</view><view>{{details.type}}</view></view>
							
							</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Rank-Item",
		data() {
			return {
				modalName:null,
				curindex:0
			};
		},
		props:{
			list:{
				type:Array,
				required:true
			},
			type:{
				type:String,
				required:true
			}
		},
		methods:{
			showModal(e) {
				this.modalName = 'Modal',
				this.curindex=e
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style lang="scss">
	.itembox{
		margin-bottom: 2vh;
		animation: barlistshowleft 1s;
	}
	.first{
		color: #ed8402;
	}
	.second{
		color:#989898
	}
	.third{
		color: #996600;
	}
	.green{
		background-color: #41ce04;
	}
	.blue{
		background-color: #1296db;
	}
.itembox{
	background-color: white;
	margin: 1vh auto;
	width: 90vw;
	height: 8vh;
	display: flex;
	flex-direction: row;
	border-radius: 10px;
	text-align: center;
	line-height: 8vh;
	.brand{
		width: 20vw;
		color: white;
		border-radius:10px 0 0 10px;
	}
	.name{
		padding-left: 2vw;
	}
	.jiaobiao{
		position: absolute;
		right: 5vw;
		width:0px;
		height:0px;
		border-style: solid;
		border-width:0px 30px 30px  0px ;
		border-color: transparent #1296db transparent transparent;
	}
	.jiaobiao2{
		position: absolute;
		right: 6.5vw;
		width:5vw;
		line-height: 2vh;
		font-size: 30px;
	}
	.jiaobiaoshuzi{
		position: absolute;
		right: 5vw;
		width:5vw;
		color: white;
		line-height: 3vh;
	}
}
</style>
